<style lang="sass" scoped>
    .common_block{
        .head{
            .pink{
                color:pink;
            }
            i{
                font-size: 16px;
                margin-left: 6px;
                margin-right: 0;
            }
        }
    }
    .add{
        width: 100%;
        height:60px;
        line-height:60px;
        background: #409EFF;
        margin-top:10px;
        margin-bottom:10px;
        color:#fff;
        text-align: center;
        cursor: pointer;
    }
    .iconfont{
        font-size:25px;
        cursor:pointer;
        text-decoration:none;
        color:#666;
    }
</style>
<template>
    <div class="container pd15">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
            <el-form-item label="产品名称：" prop="productName">
                <el-input v-model.trim="ruleForm.productName"></el-input>
            </el-form-item>
            <el-form-item label="类目：" prop="xxx">
                <el-select v-model="ruleForm.categId" placeholder="请选择类目">
                    <el-option v-for="item in categlist" :key="item.categId" :label="item.categName" :value="item.categId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开本：">
                <el-input v-model.trim="ruleForm.format"></el-input>
            </el-form-item>
            <el-form-item label="国际标准书号ISBN：" prop="ISBN">
                <el-input v-model.trim="ruleForm.ISBN"></el-input>
            </el-form-item>
            <el-form-item label="是否套装：">
                <template>
                    <el-radio v-model="ruleForm.isSuit" label="1">是</el-radio>
                    <el-radio v-model="ruleForm.isSuit" label="0">否</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="作者：">
                <el-input v-model.trim="ruleForm.author"></el-input>
            </el-form-item>
            <el-form-item label="出版社：">
                <el-input v-model.trim="ruleForm.press"></el-input>
            </el-form-item>
            <el-form-item label="装订方式：">
                <el-input v-model.trim="ruleForm.bindingWay"></el-input>
            </el-form-item>
            <!-- <el-form-item label="开本：" prop="format">
                <el-input v-model.trim="ruleForm.format"></el-input>
            </el-form-item>
            <el-form-item label="纸张：" prop="paper">
                <el-input v-model.trim="ruleForm.paper"></el-input>
            </el-form-item>
            <el-form-item label="包装：" prop="packaging">
                <el-input v-model.trim="ruleForm.packaging"></el-input>
            </el-form-item>
            <el-form-item label="国际标准书号ISBN：" prop="ISBN">
                <el-input v-model.trim="ruleForm.ISBN"></el-input>
            </el-form-item>
            <el-form-item label="丛书名：" prop="cnmarc">
                <el-input v-model.trim="ruleForm.cnmarc"></el-input>
            </el-form-item> -->
            <el-form-item label="产品主图：" prop="mainImageUrl">
                <upload-image :data.sync="ruleForm.mainImageUrl" :limit="1"></upload-image>
            </el-form-item>

            <div class="mt20">
                <!-- 新增提交 -->
                <el-button @click="add('ruleForm')" v-if="!$route.query.productCode" class="ml20" type="primary" :plain="false" round>提交</el-button>
                <!-- 修改提交 -->
                <el-button @click="modify('ruleForm')" v-else class="ml20" type="primary" :plain="false" round>提交</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
    import uploadImage from 'components/uploadImage'
    import { mapMutations } from 'vuex'
    export default {
        components: {
            uploadImage
        },
        data() {
            return {
                beforeajax:false,
                ruleForm: {
                    productName:'', //	是	string	产品名称
                    categId:'', //	是	string	类目ID
                    format:'', //	是	string	开本
                    ISBN:'', //	是	string	国际标准书号ISBN
                    isSuit:'0', //	是	string	是否套装，0-不是，1-是
                    author:'', //	是	string	作者
                    press:'', //	是	string	出版社
                    bindingWay:'', //	是	string	装订方式
                    mainImageUrl:[], //	是	string	主图
                },
                rules: {
                    productName: [
                        { required: true, message: '请输入产品名称', trigger: 'blur' },
                    ],
                    ISBN: [
                        { required: true, message: '请输入ISBN', trigger: 'blur' },
                    ],
                },
                categlist:[],
            }
        },
        watch: {},
        created() {
            if(this.$route.query.productCode){
                document.title = "修改产品"
                this.NAV_EDIT({
                    menu:this.$route.meta.menu,
                    title:'修改产品'
                })
                this.getInfo();
            }
            server.getCategList().then(res=>{
                this.categlist = res;
            })
        },
        mounted() {
            this.$nextTick(() => { 
                
            });
        },
        methods: {
            ...mapMutations("index", ["NAV_EDIT"]),
            getInfo(){
                util.ajax({
                    url:config.baseApi + 'bookMall-admin/api/product/getProductDetail',
                    data:{
                        productCode:this.$route.query.productCode
                    },
                    success:(data=>{
                        if(data.data.mainImageUrl){
                            data.data.mainImageUrl = data.data.mainImageUrl.split(',');
                        }else{
                            data.data.mainImageUrl = [];
                        }
                        this.ruleForm = data.data;
                    })
                })
            },
            add(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let param = JSON.parse(JSON.stringify(this.ruleForm));
                        param.mainImageUrl = param.mainImageUrl.toString();
                        util.ajax({
                            url:config.baseApi + 'bookMall-admin/api/product/addProduct',
                            data:param,
                            success:()=>{
                                popup.miss({content:'新增成功'});
                                router.go(-1)
                            }
                        })
                    }
                })
            },
            modify(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let param = JSON.parse(JSON.stringify(this.ruleForm));
                        param.mainImageUrl = param.mainImageUrl.toString();
                        util.ajax({
                            url:config.baseApi + 'bookMall-admin/api/product/modifyProduct',
                            data:param,
                            success:()=>{
                                popup.miss({content:'修改成功'});
                                router.go(-1)
                            }
                        })
                    }
                })
            },
        }
    };
</script>